import React, { Component, Fragment } from "react";
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
import PostcodeModal from "./components/PostcodeModal";
import { Tag, Switch, message, Tooltip } from "antd";
import { InfoCircleOutlined } from '@ant-design/icons';
import moment from "moment";
// api
import { Status } from "../../api/raycloud";

class PostCardList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            PageNumber: 1,
            PageSize: 10,
            keyWork: "",
            // 表头
            tableConfig: {
                url: "postcardList",
                method: "get",
                checkbox: true,
                thead: [
                    { title: "项目名称", dataIndex: "project_name", key: "project_name" },
                    { title: "本地名称", dataIndex: "local_name", key: "local_name" },
                    { title: "环境", dataIndex: "env", key: "env" },
                    { title: "申请人", dataIndex: "proposer", key: "proposer" },
                    { title: "发布码", dataIndex: "code", key: "code" },
                    { title: "更新时间", dataIndex: "update_time", key: "update_time" },
                    { 
                        title: "过期时间", dataIndex: "aging_time", key: "aging_time",
                        render: (aging_time => {
                            let now_time = moment().format("YYYY-MM-DD HH:mm:ss");
                            let isBefore= moment(now_time).isBefore(aging_time)
                            let time_color = isBefore ? 'blue' : 'red'
                            return (
                                <span style={{color: time_color}}>{aging_time}</span>
                            )
                        })
                     },
                    { 
                        title:
                        <div>权限&nbsp;
                            <Tooltip placement='bottom' title={<div><span>除申请人外可获取人员姓名</span></div>}>
                                <InfoCircleOutlined />
                            </Tooltip>
                        </div>,
                        dataIndex: "auth", key: "auth",
                        render: (rowData => {
                            return (
                                <div> 
                                    {rowData ? rowData.split(',').map(auth => (<tr>{auth}</tr>)) : ''}
                                </div>
                            )
                        })
                    },
                    { 
                        title: "标签", dataIndex: "tag", key: "tag", 
                        render: (rowData => {
                            return (
                                <div>
                                    {rowData ? rowData.split(',').map(tag => (<Tag>{tag}</Tag>)) : ''}
                                </div>
                            )
                        })
                    },
                    { 
                        title:
                        <div>禁启用&nbsp;
                            <Tooltip placement='bottom' title={<div><span>发布码开关</span><br/><span>开启:申请人和有权限人员可获取</span><br/><span>关闭:所有人都无法获取</span></div>}>
                                <InfoCircleOutlined />
                            </Tooltip>
                        </div>,
                        dataIndex: "status", 
                        key: "status",
                        render: (status, rowData) => {
                          return <Switch 
                            onChange={() => this.onHandlerSwith(rowData)} 
                            loading={rowData.id === this.state.id} 
                            checkedChildren="启用" 
                            unCheckedChildren="关闭"
                            defaultChecked={status}
                            size='small'
                            />
                        }
                    },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        width: 215,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.postcodeModal({status: true, postcode_id: rowData.id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "项目名称", 
                        name: "project_name__contains", 
                        placeholder: "请输入项目名称"
                    },
                    { 
                        type: "Input",
                        label: "本地名称", 
                        name: "local_name__contains", 
                        placeholder: "请输入本地名称"
                    },
                    { 
                        type: "Input",
                        label: "申请人", 
                        name: "proposer", 
                        style: { width: "150px" },
                        placeholder: "请输入申请人"
                    },
                    { 
                        type: "Select",
                        label: "禁启用", 
                        name: "status",
                        style: { width: "100px" },
                        optionsKey : "postcode_status",
                        placeholder: "请选择标签"
                    },
                    { 
                        type: "SelectComponent",
                        label: "标签", 
                        url: "postcardTagList",
                        method: "get",
                        name: "tag", 
                        propsKey: {
                            label: "tag",
                            value: "tag"
                        },
                        style: { width: '200px' },
                        placeholder:"请选择标签"
                    }
                ],
                formSearchCol: 20,
                formRightCol: 4,
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}

    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    // 获取弹窗子组件实例
    getPostcodeModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    postcodeModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    // 禁启用
    onHandlerSwith(data){
        if(!data) { return false; }
        const requestData = {
            id: data.id,
            status: data.status === true ? false : true
        }
        // 第一种做法，用组件本身异步
        this.setState({ id: data.id })
        // 第二种做法，自己做的开关
        // this.setState({ flag: true })
        Status(requestData).then(response => {
            console.log(response)
            message.info(response.data.msg);
            this.setState({ id: "" })
        // this.setState({ flag: false })
        }).catch(error => {
            this.setState({ id: "" })
        // this.setState({ flag: false })
        })
    }
    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    
    render(){
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchStatusButton={true} batchButton={true} config={this.state.tableConfig} />
                <PostcodeModal onRef={this.getPostcodeModalRef} />
            </Fragment>
        )
    }
}

export default PostCardList;